<template>
  <div class="add-article-container">
      <el-button type="primary" style="margin: 0  0 20px 40px" @click="$router.go(-1)">返 回</el-button>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="图片" prop="image">
        <el-upload
                class="avatar-uploader"
                action="http://47.99.48.208/api/file_upload"
                :show-file-list="false"
                accept=".jpg, .png, .jpeg"
                :on-success="handleAvatarSuccess">
          <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章名称" prop="title">
        <el-input style="width: 40%;" v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="作者名称" prop="author">
        <el-input style="width: 40%;" v-model="ruleForm.author"></el-input>
      </el-form-item>
      <el-form-item label="价格(分)" prop="amount">
        <el-input style="width: 40%;" v-model="ruleForm.amount"></el-input>
      </el-form-item>
      <el-form-item label="文章类别" prop="category_id">
        <el-cascader style="width: 40%"
                     :options="options"
                     v-model="ruleForm.category_id"
                     :props="{label: 'title', value: 'id' }"></el-cascader>
      </el-form-item>
      <el-form-item class="text-area-wrap" label="文章介绍" prop="text">
        <editor :content="content" v-model="ruleForm.text" @textChange="getMsgFormSon"></editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">添 加</el-button>
        <el-button @click="$router.go(-1)">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { Message } from 'element-ui'
  import editor from './Quilleditor'
  export default {
    name: 'addArticle',
    data () {
      return {
        content: '',
        options: [],
        categoryData: [],
        ruleForm: {
          text: '',
          category_id: '',
          title: '',
          author: '',
          image: '',
          amount: ''
        },
        rules: {
          title: [
            { required: true, message: '请输入文章名称', trigger: 'blur' }
          ],
          text: [
            { required: true, message: '请输入文章介绍', trigger: 'blur' }
          ],
          author: [
            { required: true, message: '请输入作者名称', trigger: 'blur' }
          ],
          amount: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ],
          category_id: [
            { required: true, message: '请选择文章类别', trigger: 'change' }
          ],
          image: [
            { required: true, message: '请上传图片', trigger: 'change' }
          ],
        }
      }
    },
    components: {
      editor
    },
    methods: {
      // 图片上传回调
      getMsgFormSon(data){
        this.ruleForm.text = data
      },
      handleAvatarSuccess (file) {
        this.ruleForm.image = file.data.path
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.category_id = this.ruleForm.category_id[1]
            this.$http.post('api/admin/article', this.ruleForm).then(r => {
              Message.success('文章添加成功...')
              this.$router.go(-1)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    created () {
      this.$http.get('api/cate/nav').then(r => {
        console.log(r, 'kskkdf分类')
        this.options = r.data.data
      })
    }
  }
</script>

<style scoped lang="less">
.add-article-container{
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 30px;
  box-sizing: border-box;
}

</style>
<style lang="less">
  .text-area-wrap strong{
    font-weight: bold !important;
  }
  .text-area-wrap em{
    font-style: italic !important;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
